<template>
  <div class="fullMain">
    <div class="fl" :class="flDiv">
      <i style="position: relative;cursor: pointer" @click="changeWidth">隐藏/显示</i>
      <el-menu
        default-active="1_1"
        :unique-opened="true"
        router>
        <navMenu :navMenus="links"></navMenu>
      </el-menu>
    </div>
    <div class="fr" :class="frDiv">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import navMenu from '../components/common/navMenu'
  export default {
    name: 'Main',
    data () {
      return {
        links : [],
        flDiv : 'width25',
        frDiv : 'width70'
      }
    },
    mounted(){
      const _this = this;
      this.axios.get('static/data/menu.json')
        .then(function (res) {
          _this.links = res.data.menu;
        })
    },
    methods:{
      changeWidth(){
        if(this.frDiv == 'width70'){
          this.frDiv = 'width99';
          this.flDiv = 'width1';
        }else{
          this.frDiv = 'width70';
          this.flDiv = 'width20';
        }
      }
    },
    components:{
      navMenu
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
